<template>
    <div id="rank">
        <div class="headerBar">
            <div class="icon" @click="goBack">
                <i class="iconfont">&#xe72d;</i>
            </div>
            排行榜
            <i class="icon-search" @click="togameHall"></i>
        </div>
        <div class="placeholder"></div>
         <scroll class="more-list" ref="scroll" v-if="gamesList.length"
                :data="gamesList" 
                :scrollY="scrollY" 
                :scrollX="scrollX"
                :bounce="bounce" 
                :pullup="pullup" 
                @scrollToEnd="_getMoreList">
                <div class="top-three">
                    <div class="two"  @click="goDetail(gameTwo.id)">
                        <div class="game-msg">
                            <p class="avator">
                                <img v-lazy="gameTwo.game_icon" alt="">
                            </p>
                            <p class="name">{{gameTwo.gamename}}</p>
                            <p class="type">{{gameTwo.game_type}}</p>
                        </div>
                        <span>下载</span>
                    </div>
                    <div class="one" @click="goDetail(gameOne.id)">
                        <div class="game-msg">
                            <p class="avator">
                                <img v-lazy="gameOne.game_icon" alt="">
                            </p>
                            <p class="name">{{gameOne.gamename}}</p>
                            <p class="type">{{gameOne.game_type}}</p>
                        </div>
                        <span>下载</span>
                    </div>
                    <div class="three"  @click="goDetail(gameThree.id)">
                        <div class="game-msg">
                            <p class="avator">
                                <img v-lazy="gameThree.game_icon" alt="">
                            </p>
                            <p class="name">{{gameThree.gamename}}</p>
                            <p class="type">{{gameThree.game_type}}</p>
                        </div>
                        <span>下载</span>
                        <span>下载</span>
                    </div>
                </div>
                <div class="other-game">
                    <div class="list-wrap" v-for="item in gamesList" :key="item.id">
                        <div class="item" @click="goDetail(item.id)">
                            <div class="avator">
                                <img v-lazy="item.game_icon" alt="">
                            </div>
                            <div class="info">
                                <div class="desc">
                                <div class="game_msg">
                                    <div class="name">
                                        {{item.gamename}}
                                        <span class="icon_hb" v-if="item.is_red"></span>
                                    </div>
                                    <div class="type">{{item.game_type}}</div>
                                </div>
                                <div class="label clearfix">
                                    <span v-for="(label,index) in item.welfare" :key="index" :style="{background:label.color}">{{label.name}}</span>
                                    <!-- <span v-for="(label,index) in item.welfare" :key="index" :style="{background:label.color}">{{label.name | labelFilter }}</span> -->
                                </div>
                                </div>
                                <div class="down">
                                     <span>申请返利</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </scroll>
        <!-- 下拉加载显示 -->
        <div class="loadlist" v-show="gamesList.length">
            <loadinglist :row="row"  :more="more"></loadinglist>
        </div>
        <!-- 初始化页面加载动画 -->
        <div class="loading-wrap" v-show="showLoading">
            <loading></loading>
        </div>
    </div>
</template>

<script>
    import Scroll from "common/scroll"
    import {gameList} from "api/game_box"
    import Loading from "common/loading"
    import Loadinglist from "common/LoadingList"
    export default {
        data(){
            return{
                row: true,     //loading文字水平显示
                isload: false, //是否正在加载
                scrollY: true,  //垂直滚动
                scrollX: false, //水平滚动
                pullup: true,   //上拉加载
                beforeScroll: true,
                bounce: false,  //动画
                more:true,      //下拉加载是否还有更多
                gamesList:[],
                page:1,
                gameOne:[],
                gameTwo:[],
                gameThree:[],
                showLoading:true
            }
        },
        created(){
            this.init();
        },
        filters:{
            labelFilter(text){
                return text.substr(0,8);
            }
        },
        methods:{
            init(){
                gameList(5,this.page,"","","","").then(res=>{
                    if(res.data.error==0){
                        this.showLoading=false;
                        let totalPage=res.data.content.totalPage;
                        this.gameOne=res.data.content.data.slice(0,1)[0];
                        this.gameTwo=res.data.content.data.slice(1,2)[0];
                        this.gameThree=res.data.content.data.slice(2,3)[0];
                        this.gamesList=res.data.content.data.slice(3);
                        if(this.page==totalPage){
                            this.more = false;
                            this.isload = true;
                        }
                    }else{
                        this.showLoading=false;
                        this.more = false;
                        this.isload=true;
                    }
                })
            },
            _getMoreList(){
                if (this.isload == true) {
                    return;
                }
                this.page++;
                this.isload = true;
                gameList(5,this.page,"","","","")
                    .then(res => {
                    if (res.data.error == 0) {
                            let totalPage=res.data.content.totalPage;
                            res = res.data.content.data;
                            this.isload = false;
                            this.gamesList = this.gamesList.concat(res);
                            if(this.page==totalPage){
                            this.more = false;
                            this.isload = true;
                        }
                    }
                })
            },
            goDetail(id) {
                this.$router.push({
                    path: `/gameDetail/${id}`
                });
            },
            togameHall(){
                this.$router.push({
                    path: '/gameHall/1/0'
                });
            },
            goBack(){
                if (window.history.length <= 1) {
                    this.$router.push({path:'/'})
                } else {
                    this.$router.go(-1)
                }
            }
        },
        components:{
            Scroll,
            Loadinglist,
            Loading
        }
    }
</script>

<style scoped lang="scss">
@import '~styles/variable.scss';
@import '~styles/mixins.scss'; 
.placeholder{
    width:100%;
    height:0.8rem;
}
#rank{
    .headerBar{
        position:fixed;
        z-index:999;
        top:0;
        left: 50%;
        transform:translateX(-50%);
        width: 7.5rem;
        height:0.8rem;
        line-height:0.8rem;
        text-align:center;
        color:#fff;
        background:$color-focus;
        font-size:$font-size-l;
        .icon{
            position:absolute;
            top:0;
            left:0.2rem;
            .iconfont{
                padding:0 0.1rem;
                font-size:0.4rem;
            }
        }
        .icon-search{
            position:absolute;
            right:0.32rem;
            top:0.2rem;
            width:0.4rem;
            height:0.4rem;
            background-size:100% 100%;
            background-image:url('../../assets/image/search_icon.png');
        }
    }
    .top-three{
        padding:0.16rem  0.24rem 0 0.24rem;
        display:flex;
        justify-content: center;
        &>div{
            position:relative;
            text-align: center;
            span{
                position:absolute;
                width:100%;
                bottom:0;
                left:0;
                font-size:$font-size-m;
                line-height:0.74rem;
                color:#fff;
            }
        }
        .two{
            width:2.1rem;
            height:3.45rem;
            margin-top:0.4rem;
            background-size:100% 100%;
            @include bg-image('../../assets/image/bg_no2');
            .game-msg{
                margin-top:0.65rem;
                text-align: center;
                .avator img{
                    width:1.2rem;
                    height:1.2rem;
                    margin:0 auto;
                }
                .name{
                    margin-top:0.05rem;
                    font-size:$font-size-l;
                    color:#4e555b;
                    @include ellipsis();
                }
                .type{
                    @include ellipsis();
                    font-size:$font-size-m;
                    color:#8e8e93;
                }
            }
        }
        .one{
            width:2.36rem;
            height:3.85rem;
            margin:0 0.23rem;
            background-size:100% 100%;
            @include bg-image('../../assets/image/bg_no1');
            .game-msg{
                margin-top:0.8rem;
                text-align: center;
                .avator img{
                    width:1.4rem;
                    height:1.4rem;
                    margin:0 auto;
                }
                .name{
                    margin-top:0.05rem;
                    font-size:$font-size-l;
                    color:#4e555b;
                    @include ellipsis();
                }
                .type{
                    @include ellipsis();
                    font-size:$font-size-m;
                    color:#8e8e93;
                }
            }
        }
        .three{
            width:2.1rem;
            height:3.45rem;
            margin-top:0.4rem;
            background-size:100% 100%;
            @include bg-image('../../assets/image/bg_no3');
            .game-msg{
                margin-top:0.65rem;
                text-align: center;
                .avator img{
                    width:1.2rem;
                    height:1.2rem;
                    margin:0 auto;
                }
                .name{
                    margin-top:0.05rem;
                    font-size:$font-size-l;
                    color:#4e555b;
                    @include ellipsis();
                }
                .type{
                    @include ellipsis();
                    font-size:$font-size-m;
                    color:#8e8e93;
                }
            }
        }
    }
    .other-game{
        margin-top:0.3rem;
        padding:0 0.4rem 0.2rem 0.4rem;
        border-top:1px solid #f2f2f2;
         .item {
            display: flex;
            min-height: 1.75rem;
            margin-top: 0.22rem;
            .avator {
            img {
                width: 1.6rem;
                height: 1.6rem;
            }
            }
            .info {
                flex: 1;
                margin-left: 0.16rem;
                display: flex;
                justify-content: space-between;
                padding-bottom: 0.22rem;
                border-bottom: 1px solid #f2f2f2;
            .desc {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                .name{
                font-size:$font-size-m;
                }
                .type {
                color: #8e8d93;
                }
                .label{
                margin-top:0.1rem;
                span{
                    float: left;
                    padding: 0.02rem 0.06rem;
                    color: #fff;
                    margin: 0.02rem;
                    border-radius: 4px;
                    font-size:9px;
                }
                }
            }
            .down {
                margin-top:0.2rem;
                width: 1.2rem;
                height: 1.2rem;
                font-size: 0.3rem;
                color: $color-block;
                border: 1px solid $color-block;
                border-radius: 0.6rem;
                display:flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                span{
                    width: .8rem;
                }
            }
            }
            &.item-type1{
            padding: 0 0.4rem;
            }
        }
    }
}
.icon_hb{
      display:inline-block;
      vertical-align: top;
      margin-top:.03rem;
      width:.82rem;
      height:.3rem;
      @include bg-image('../../assets/image/s_hb');
      background-size:100% 100%;
      background-repeat: no-repeat;
}
</style>